<template>
  <div>
    <!--title-->

    <div class="content-title" ref="title">
      <div class="su-title">
        <i class="el-icon-tickets"></i>
        <span>商机管理</span>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-plus el-icon--left" @click="titleAddClick">新增商机信息</el-button>
        <el-button type="danger" @click="tabsOrTableDialogEmpty">清空设置</el-button>
      </div>
    </div>


    <!--tabs-->
    <div class="common-tabs" ref="tabs">
      <!--tabs切换标题-->
      <el-tabs v-model="tabsProp.active" @tab-click="tabsSwitchClick">

        <el-tab-pane name="" label="全部"/>

        <el-tab-pane name="1" label="商机"/>

        <el-tab-pane name="2" label="已立项"/>

        <el-tab-pane name="3" label="已失效"/>

      </el-tabs>

      <div class="common-tabs-right">
        <div class="common-tabs-right-search">
          <el-button type="info" @click="tabsProp.SearchDropDown=!tabsProp.SearchDropDown">
            高级搜索
            <i :class="[tabsProp.SearchDropDown?'el-icon-bottom':'el-icon-top','el-icon--right']"></i>
          </el-button>
        </div>
      </div>
      <!--tabs 搜索下拉的值-->
      <el-collapse-transition v-if="tabsProp.SearchDropDown">
        <ul class="common-tabs-from" ref="commonTabsFrom">
          <li v-if="Utils.tabsShowOrder('项目名称',toConfigureFieldDialog.tabsProp).checkbox" :style="{order:Utils.tabsShowOrder('项目名称',toConfigureFieldDialog.tabsProp).order}">
            <span>项目名称</span>
            <el-input placeholder="请输入项目名称" v-model="tabsSearchData.projectName" clearable/>
          </li>

          <li v-for="index in tabsProp.liHtmlNum" :key="index+1000" style="order:888"></li>
          <li class="common-tabs-from-but" style="order:999">
            <el-button icon="el-icon-setting" circle @click="tabsOrTableSetClick('tabsProp','筛选项配置')"/>
            <el-button icon="el-icon-refresh el-icon--left" @click="tabsSearchReset">重置</el-button>
            <el-button icon="el-icon-search el-icon--left" type="primary" @click="tabsSearchDetermine">查询</el-button>
          </li>
        </ul>
      </el-collapse-transition>

    </div>

    <!--table表格配置-->
    <template>
      <!--表格前的按钮-->
      <div class="common-table-title-but" ref="tableTopBut">
        <el-button type="danger" icon="el-icon-delete el-icon--left" @click="tableTitleButBatchDel">批量删除</el-button>
        <el-button icon="el-icon-setting el-icon--left" @click="tabsOrTableSetClick('tableProp','筛表头配置')">
          配置表头
        </el-button>
      </div>
      <!--表格内容-->
      <el-table
          ref="table"
          :data="tableData"
          border
          style="width: 100%"
          :max-height="tableProp.tableHeight"
          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
          v-loading="tableProp.loading"
          @selection-change="tableSelectionChange"
          class="cc-table-style"
      >

        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>

        <el-table-column label="项目名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="projectName"
                         v-if="Utils.tableShowFixed('项目名称',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('项目名称',this.toConfigureFieldDialog.tableProp).fixed"/>

        <el-table-column label="项目负责人" min-width="150" :show-overflow-tooltip="true" align="center" prop="projectManager"
                         v-if="Utils.tableShowFixed('项目负责人',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('项目负责人',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in projectManagerOption">
              <template v-if="scope.row.projectManager==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>

        <el-table-column label="开始时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="startTime"
                         v-if="Utils.tableShowFixed('开始时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('开始时间',this.toConfigureFieldDialog.tableProp).fixed"/>

        <el-table-column label="预计项目金额" min-width="150" :show-overflow-tooltip="true" align="center" prop="estiAmount"
                         v-if="Utils.tableShowFixed('预计项目金额',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('预计项目金额',this.toConfigureFieldDialog.tableProp).fixed"/>

        <el-table-column label="客户名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientName"
                         v-if="Utils.tableShowFixed('客户名称',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('客户名称',this.toConfigureFieldDialog.tableProp).fixed"/>

        <el-table-column label="项目联系人" min-width="150" :show-overflow-tooltip="true" align="center" prop="projectContact"
                         v-if="Utils.tableShowFixed('项目联系人',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('项目联系人',this.toConfigureFieldDialog.tableProp).fixed"/>

        <el-table-column label="联系电话" min-width="150" :show-overflow-tooltip="true" align="center" prop="contactTel"
                         v-if="Utils.tableShowFixed('联系电话',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('联系电话',this.toConfigureFieldDialog.tableProp).fixed"/>

        <el-table-column label="项目说明" min-width="150" :show-overflow-tooltip="true" align="center" prop="remarks"
                         v-if="Utils.tableShowFixed('项目说明',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('项目说明',this.toConfigureFieldDialog.tableProp).fixed"/>

        <el-table-column label="状态" min-width="150" :show-overflow-tooltip="true" align="center" prop="status"
                         v-if="Utils.tableShowFixed('状态',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('状态',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in statusOption">
              <template v-if="scope.row.status==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="480" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="tableSeeClick(scope.row,0)">查看/编辑</el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="tableDelClick(scope.row)">删除</el-button>
            <el-button type="warning" icon="el-icon-check el-icon--left" @click="tableBut2(scope.row)">立项</el-button>
            <el-button type="warning" icon="el-icon-check el-icon--left" @click="tableBut3(scope.row)">失效</el-button>
            <el-button type="warning" icon="el-icon-check el-icon--left" @click="tableBut4(scope.row)">还原</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页-->
      <div class="common-pagination">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="paginationProp.currentPage"
            :page-sizes="[10, 20, 50, 100,500,1000]"
            :page-size="paginationProp.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="paginationProp.total"
        />
      </div>

    </template>
    <!--抽屉增加和修改-->
    <el-drawer
        :title="drawerProp.title"
        :visible.sync="drawerProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        custom-class="common-drawer"
        size="90%"
    >
      <div class="common-drawer-content" v-loading="drawerProp.loading">
        <div class="parent">
          <!--左边-->
          <div class="leftChild">
            <ul class="content">
              <template v-for="(item,key) in drawerProp.leftProp">
                <li :key="key" :class="[drawerProp.active===key?'active':'']" @click="drawerActiveClick(key)">
                  {{ item }}
                </li>
              </template>
            </ul>
          </div>
          <!--右边-->
          <div class="rightChild">
            <ul class="content" ref="scrollViewRight" @wheel.passive="addWheelChange" :style="{'height': drawerProp.rightProp.height+'px'}">

              <li class="content-main" ref="drawerLi0">
                <!--标题-->
                <div class="title">
                  <span></span>
                  <label>基础信息</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see'">
                    <div class="n" @click="drawerEdit(0)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status==='see'">
                  <ul class="common-drawer-see">

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">项目名称</span>

                      {{ formData.projectName }}

                    </li>

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">项目负责人</span>

                      <template v-for="item  in projectManagerOption">
                        <template v-if="formData.projectManager==item.value">
                          {{ item.label }}
                        </template>
                      </template>

                    </li>

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">开始时间</span>

                      {{ formData.startTime ? Utils.timeDate(formData.startTime, 3) : "" }}

                    </li>

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">预计项目金额</span>

                      {{ formData.estiAmount }}

                    </li>

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">客户名称</span>

                      {{ formData.clientName }}

                    </li>

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">项目联系人</span>

                      {{ formData.projectContact }}

                    </li>

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">联系电话</span>

                      {{ formData.contactTel }}

                    </li>

                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">项目说明</span>

                      {{ formData.remarks }}

                    </li>

                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">状态</span>

                      <template v-for="item in statusOption">
                        <template v-if="formData.status==item.value">
                          {{ item.label }}
                        </template>
                      </template>

                    </li>

                  </ul>
                </div>
                <!--修改-->
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-form :model="formData" ref="drawerFrom0" class="common-drawer-edit">

                    <el-form-item label="项目名称" prop="projectName" class="common-drawer-edit-li " :rules="[{ required: true, message: '请输入项目名称', trigger: 'blur' }]">

                      <el-input placeholder="请输入项目名称" v-model="formData.projectName" clearable/>

                    </el-form-item>

                    <el-form-item label="项目负责人" prop="projectManager" class="common-drawer-edit-li " :rules="[]">

                      <el-select placeholder="请选择项目负责人" v-model="formData.projectManager" filterable clearable>
                        <el-option v-for="item in projectManagerOption" :key="item.value" :label="item.label" :value="item.value"/>
                      </el-select>

                    </el-form-item>

                    <el-form-item label="开始时间" prop="startTime" class="common-drawer-edit-li " :rules="[]">
                      <el-date-picker placeholder="请选择开始时间" v-model="formData.startTime" type="date" value-format="timestamp"/>

                    </el-form-item>

                    <el-form-item label="预计项目金额" prop="estiAmount" class="common-drawer-edit-li " :rules="[]">

                      <el-input placeholder="请输入预计项目金额" v-model="formData.estiAmount" clearable/>

                    </el-form-item>

                    <el-form-item label="客户名称" prop="clientName" class="common-drawer-edit-li " :rules="[]">

                      <el-input placeholder="请输入客户名称" v-model="formData.clientName" clearable/>

                    </el-form-item>

                    <el-form-item label="项目联系人" prop="projectContact" class="common-drawer-edit-li " :rules="[]">

                      <el-input placeholder="请输入项目联系人" v-model="formData.projectContact" clearable/>

                    </el-form-item>

                    <el-form-item label="联系电话" prop="contactTel" class="common-drawer-edit-li " :rules="[]">

                      <el-input placeholder="请输入联系电话" v-model="formData.contactTel" clearable/>

                    </el-form-item>
                    <el-form-item label="状态" prop="status" class="common-drawer-edit-li " :rules="[]">
                      <el-radio-group v-model="formData.status">
                        <el-radio v-for="(item,key) in statusOption" :key="key" :label="item.value">{{ item.label }}</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="项目说明" prop="remarks" class="common-drawer-edit-li li2" :rules="[]">

                      <el-input type="textarea" placeholder="请输入项目说明" v-model="formData.remarks" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300" show-word-limit/>

                    </el-form-item>


                  </el-form>
                </div>
              </li>

              <!--任务信息-->
              <li class="content-main" ref="drawerLi1">
                <!--标题-->
                <div class="title">
                  <span></span>
                  <label>任务信息</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see'">
                    <div class="n" @click="drawerEdit(1)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status==='see'">
                  <ul class="common-drawer-see">

                    <li class="common-drawer-see-li li2">
                      <el-table
                          ref="table"
                          :data="formData.array1"
                          border
                          style="width: 100%"
                          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                          class="cc-table-style"
                      >
                        <el-table-column label="序号" type="index" width="50" align="center"/>
                        <el-table-column label="负责人" min-width="150" :show-overflow-tooltip="true" align="center">
                          <template slot-scope="scope">
                            <template v-for="item in projectManagerOption">
                              <template v-if="scope.row.responsible==item.value">
                                {{ item.label }}
                              </template>
                            </template>
                          </template>
                        </el-table-column>
                        <el-table-column label="任务名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="taskName"/>
                        <el-table-column label="任务说明" min-width="150" :show-overflow-tooltip="true" align="center" prop="taskRemarks"/>
                        <el-table-column label="任务说明" min-width="150" :show-overflow-tooltip="true" align="center" prop="taskRemarks"/>
                        <el-table-column label="开始时间" min-width="150" :show-overflow-tooltip="true" align="center">
                          <template slot-scope="scope">
                            {{ scope.row.startTime ? Utils.timeDate(scope.row.startTime, 3) : "" }}
                          </template>
                        </el-table-column>
                        <el-table-column label="结束时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="endTime">
                          <template slot-scope="scope">
                            {{ scope.row.endTime ? Utils.timeDate(scope.row.endTime, 3) : "" }}
                          </template>
                        </el-table-column>
                        <el-table-column label="实际结束时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="realEndTime">
                          <template slot-scope="scope">
                            {{ scope.row.realEndTime ? Utils.timeDate(scope.row.realEndTime, 3) : "" }}
                          </template>
                        </el-table-column>
                        <el-table-column label="绩效" min-width="150" :show-overflow-tooltip="true" align="center" prop="performance"/>
                        <el-table-column label="操作" width="150" align="center">
                          <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-check el-icon--left" @click="completeTaskInformation(scope.$index,scope.row)">完成</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </li>
                  </ul>
                </div>
                <!--修改-->
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addTaskInformation" style="margin: 15px 0 10px">添加任务信息</el-button>
                  <el-form :model="formData" ref="drawerFrom1" class="common-drawer-edit">
                    <el-table
                        ref="table"
                        :data="formData.array1"
                        border
                        style="width: 100%"
                        :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                        class="cc-table-style">

                      <el-table-column label="责任人" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array1[${scope.$index}].responsible`"
                                        :rules="[{ required: true, message: '请选择责任人', trigger: 'change' }]">

                            <el-select placeholder="请选择责任人" v-model="scope.row.responsible" filterable clearable style="margin-top: 18px;width: 100%">
                              <el-option v-for="item in projectManagerOption" :key="item.value" :label="item.label"
                                         :value="item.value"/>
                            </el-select>

                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="任务名称" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array1[${scope.$index}].taskName`"
                                        :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                            <el-input placeholder="请输入任务名称" v-model="scope.row.taskName" clearable style="margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="任务说明" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array1[${scope.$index}].taskRemarks`"
                                        :rules="[{ required: true, message: '请输入任务说明', trigger: 'blur' }]">
                            <el-input placeholder="请输入任务说明" v-model="scope.row.taskRemarks" clearable style="margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="开始时间" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array1[${scope.$index}].startTime`"
                                        :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]">
                            <el-date-picker placeholder="请选择开始时间" v-model="scope.row.startTime" type="date"
                                            value-format="timestamp" style="width: 100%;margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="结束时间" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array1[${scope.$index}].endTime`"
                                        :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]">
                            <el-date-picker placeholder="请选择结束时间" v-model="scope.row.endTime" type="date"
                                            value-format="timestamp" style="width: 100%;margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="绩效" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array1[${scope.$index}].performance`"
                                        :rules="[{ required: true, message: '请输入绩效', trigger: 'blur' }]">
                            <el-input placeholder="请输入绩效" v-model="scope.row.performance" clearable style="margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                          <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delTaskInformation(scope.$index,scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
              </li>

              <!--汇报记录-->
              <li class="content-main" ref="drawerLi2">
                <!--标题-->
                <div class="title">
                  <span></span>
                  <label>汇报记录</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see'">
                    <div class="n" @click="drawerEdit(2)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status==='see'">
                  <ul class="common-drawer-see">

                    <li class="common-drawer-see-li li2">
                      <el-table
                          ref="table"
                          :data="formData.array2"
                          border
                          style="width: 100%"
                          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                          class="cc-table-style"
                      >
                        <el-table-column label="序号" type="index" width="50" align="center"/>
                        <el-table-column label="汇报人" min-width="150" :show-overflow-tooltip="true" align="center">
                          <template slot-scope="scope">
                            <template v-for="item in projectManagerOption">
                              <template v-if="scope.row.reported==item.value">
                                {{ item.label }}
                              </template>
                            </template>
                          </template>
                        </el-table-column>
                        <el-table-column label="汇报名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="reportName"/>
                        <el-table-column label="汇报内容" min-width="150" :show-overflow-tooltip="true" align="center" prop="reportContent"/>
                        <el-table-column label="汇报时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="reportTime">
                          <template slot-scope="scope">
                            {{ scope.row.reportTime ? Utils.timeDate(scope.row.reportTime, 3) : "" }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </li>

                  </ul>
                </div>
                <!--修改-->
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addReportRecord" style="margin: 15px 0 10px">添加汇报记录</el-button>
                  <el-form :model="formData" ref="drawerFrom2" class="common-drawer-edit">
                    <el-table
                        ref="table"
                        :data="formData.array2"
                        border
                        style="width: 100%"
                        :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                        class="cc-table-style">

                      <el-table-column label="汇报人" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array2[${scope.$index}].reported`"
                                        :rules="[{ required: true, message: '请选择汇报人', trigger: 'change' }]">

                            <el-select placeholder="请选择汇报人" v-model="scope.row.reported" filterable clearable style="margin-top: 18px;width: 100%">
                              <el-option v-for="item in projectManagerOption" :key="item.value" :label="item.label"
                                         :value="item.value"/>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="汇报名称" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array2[${scope.$index}].reportName`"
                                        :rules="[{ required: true, message: '请输入汇报名称', trigger: 'blur' }]">
                            <el-input placeholder="请输入汇报名称" v-model="scope.row.reportName" clearable style="margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="汇报内容" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array2[${scope.$index}].reportContent`"
                                        :rules="[{ required: true, message: '请输入汇报内容', trigger: 'blur' }]">
                            <el-input placeholder="请输入任务说明" v-model="scope.row.reportContent" clearable style="margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="汇报时间" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array2[${scope.$index}].reportTime`"
                                        :rules="[{ required: true, message: '请选择汇报时间', trigger: 'change' }]">
                            <el-date-picker placeholder="请选择开始时间" v-model="scope.row.reportTime" type="date"
                                            value-format="timestamp" style="width: 100%;margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                          <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delReportRecord(scope.$index,scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
              </li>

              <!--问题反馈-->
              <li class="content-main" ref="drawerLi3">
                <!--标题-->
                <div class="title">
                  <span></span>
                  <label>问题反馈</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see'">
                    <div class="n" @click="drawerEdit(3)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status==='see'">
                  <ul class="common-drawer-see">
                    <li class="common-drawer-see-li li2">
                      <el-table
                          ref="table"
                          :data="formData.array3"
                          border
                          style="width: 100%"
                          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                          class="cc-table-style"
                      >
                        <el-table-column label="序号" type="index" width="50" align="center"/>
                        <el-table-column label="问题反馈人" min-width="150" :show-overflow-tooltip="true" align="center">
                          <template slot-scope="scope">
                            <template v-for="item in projectManagerOption">
                              <template v-if="scope.row.feedbacker==item.value">
                                {{ item.label }}
                              </template>
                            </template>
                          </template>
                        </el-table-column>
                        <el-table-column label="问题反馈名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="feedbackName"/>
                        <el-table-column label="问题反馈内容" min-width="150" :show-overflow-tooltip="true" align="center" prop="feedbackContent"/>
                        <el-table-column label="问题反馈时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="feedbackTime">
                          <template slot-scope="scope">
                            {{ scope.row.feedbackTime ? Utils.timeDate(scope.row.feedbackTime, 3) : "" }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </li>

                  </ul>
                </div>
                <!--修改-->
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addProblemFeedback" style="margin: 15px 0 10px">添加汇报记录</el-button>
                  <el-form :model="formData" ref="drawerFrom3" class="common-drawer-edit">
                    <el-table
                        ref="table"
                        :data="formData.array3"
                        border
                        style="width: 100%"
                        :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                        class="cc-table-style">

                      <el-table-column label="问题反馈人" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array3[${scope.$index}].feedbacker`"
                                        :rules="[{ required: true, message: '请选择问题汇报人', trigger: 'change' }]">

                            <el-select placeholder="请选择汇报人" v-model="scope.row.feedbacker" filterable clearable style="margin-top: 18px;width: 100%">
                              <el-option v-for="item in projectManagerOption" :key="item.value" :label="item.label"
                                         :value="item.value"/>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="问题反馈名称" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array3[${scope.$index}].feedbackName`"
                                        :rules="[{ required: true, message: '请输入问题反馈名称', trigger: 'blur' }]">
                            <el-input placeholder="请输入问题反馈名称" v-model="scope.row.feedbackName" clearable style="margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="问题反馈内容" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array3[${scope.$index}].feedbackContent`"
                                        :rules="[{ required: true, message: '请输入问题反馈内容', trigger: 'blur' }]">
                            <el-input placeholder="请输入问题反馈内容" v-model="scope.row.feedbackContent" clearable style="margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>

                      <el-table-column label="问题反馈时间" min-width="150" :show-overflow-tooltip="true" align="center" label-class-name="tableLabelRequired">
                        <template slot-scope="scope">
                          <el-form-item :prop="`array3[${scope.$index}].feedbackTime`"
                                        :rules="[{ required: true, message: '请选择问题反馈时间', trigger: 'change' }]">
                            <el-date-picker placeholder="请选择问题反馈时间" v-model="scope.row.feedbackTime" type="date"
                                            value-format="timestamp" style="width: 100%;margin-top: 18px"/>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                          <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delProblemFeedback(scope.$index,scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>


                </div>
              </li>

              <!--附件上传-->
              <li class="content-main" ref="drawerLi4">
                <!--标题-->
                <div class="title">
                  <span></span>
                  <label>附件信息</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see'">
                    <div class="n" @click="drawerEdit(4)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status==='see'">
                  <ul class="common-drawer-see">

                    <li class="common-drawer-see-li li2">
                      <el-table
                          ref="table"
                          :data="formData.array4"
                          border
                          style="width: 100%"
                          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                          class="cc-table-style"
                      >
                        <el-table-column label="序号" type="index" width="50" align="center"/>
                        <el-table-column label="附件名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="name"/>
                        <el-table-column label="操作" width="150" align="center">
                          <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-download el-icon--left" @click="attachmentDownload(scope.$index,scope.row)">下载</el-button>
                          </template>
                        </el-table-column>
                      </el-table>

                    </li>

                  </ul>
                </div>
                <!--修改-->
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-form :model="formData" ref="drawerFrom4" class="common-drawer-edit">
                    <el-form-item label="" prop="a9" class="common-drawer-edit-li li2" :rules="[]">
                      <el-checkbox-group v-model="formData.array4" v-show="false">
                        <el-checkbox label="">验证需要</el-checkbox>
                      </el-checkbox-group>
                      <common-upload-file
                          :disabled="array4Option.disabled"
                          :componentSetOptions="array4Option"
                          :uploadValue="formData.array4"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='add'">
          <el-button
              icon="el-icon-close el-icon--left"
              @click="drawerProp.isDrawer=false"
          >
            取消
          </el-button>
          <el-button
              type="primary"
              icon="el-icon-check el-icon--left"
              @click="drawerSubmitForm('add')"
          >
            保存
          </el-button>
        </div>
        <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='edit'">
          <el-button
              icon="el-icon-close el-icon--left"
              @click="drawerSubmitForm('see')"
          >
            取消
          </el-button>
          <el-button
              type="primary"
              icon="el-icon-check el-icon--left"
              @click="drawerSubmitForm('edit')"
          >
            保存
          </el-button>
        </div>
      </div>
    </el-drawer>

    <!--tabs和table dialog 字段选择显示问题-->
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        :title="toConfigureFieldDialog.title"
        :visible.sync="toConfigureFieldDialog.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="tabsOrTableCancel"
        width="1060px"
    >
      <div
          class="toConfigure-field-dialog-content"
          v-loading="toConfigureFieldDialog.loading"
      >
        <div class="left">
          <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="tabsOrTableSearch(toConfigureFieldDialog.search)"/>
          </el-input>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <template v-for="(item,key) in toConfigureFieldDialog[toConfigureFieldDialog.status]">
                  <dl :key="key" class="content" v-if="item.show">
                    <dt>{{ item.name }}</dt>
                    <dd>
                      <template v-for="(item2, key2) in item.option">
                        <el-checkbox v-model="item2.checkbox" @change="tabsOrTableChecked(item2)" :key="key2" v-if="item2.show" :disabled="item2.disabled">
                          <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label" placement="top-start" :key="key">
                            <div class="tooltip">{{ item2.label }}</div>
                          </el-tooltip>
                        </el-checkbox>
                      </template>
                    </dd>
                  </dl>
                </template>
              </el-scrollbar>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="title">
            已选择（{{ toConfigureFieldDialog.selectNum }}）
          </div>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <!--tabs配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tabsProp'">
                  <draggable v-model="toConfigureFieldDialog.draggableProp">
                    <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                      <li :key="key">
                        <i class="el-icon-thumb"/><span>{{ item.label }}</span><i class="el-icon-close" @click="tabsOrTableClose(item,key)" v-show="!item.disabled"></i>
                      </li>
                    </template>
                  </draggable>
                </ul>
                <!--table配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tableProp'">
                  <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                    <li :key="key">
                      <i class="el-icon-thumb"/><span>{{ item.label }}</span>
                      <el-select v-model="item.fixed" class="frozenSelect">
                        <el-option v-for="item in $store.state.tableFixed" :key="item.value" :label="item.label" :value="item.value"/>
                      </el-select>
                      <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                    </li>
                  </template>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button
            type="danger"
            @click="tabsOrTableDialogReductionInit(toConfigureFieldDialog.status)"
            icon="el-icon-delete el-icon--left"
        >还原初始化
        </el-button>
        <el-button
            @click="tabsOrTableCancel"
            icon="el-icon-close el-icon--left"
        >取 消
        </el-button>
        <el-button
            type="primary"
            @click="tabsOrTableDetermine"
            icon="el-icon-check el-icon--left"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>

import draggable from 'vuedraggable'

export default {
  name: 'navigation19',
  components: {draggable},
  props: [],
  data() {
    return {

      //接口名称
      apiProp: {
        tableInit: 'navigation19List',//表格初始化
        tableAddEdit: 'navigation19AddEdit',//表格增加和编辑接口
        tableDel: 'navigation19Del',//表格删除接口
        tableQuery: 'navigation19Query',//表格查一条接口
        tableBatchDel: 'navigation19BatchDel',//批量删除接口
        tableImport1: process.env.NODE_ENV === 'development' ? `${window.location.origin}/api/navigation19/import.do` : `${window.location.origin}/navigation19/import.do`,//导入接口
        tabsOrTableId: 104,//设置搜索条件和表头id
        selectApiBoolean: false,//下拉接口是否拉取过
      },


      //tabs 配置
      tabsProp: {
        active: '',//tabs 默认选择哪个标题 空是0
        statusField: 'status',//切换的字段名
        SearchDropDown: true,//高级搜索下拉默认显示状态
        liHtmlNum: '',//有高级搜索时候差几个li
      },


      //tabs 搜索配置
      tabsSearchData: {
        projectName: '',//项目名称
      },
      //table 数据
      tableData: [],
      tableProp: {
        loading: false,
        tableHeight: 0,
        tableSelectAll: [],//表格多选的值
      },

      //新增抽屉 配置
      drawerProp: {
        isDrawer: false,
        loading: false,
        title: '',
        active: 0,//左边选择了哪个
        status: 'add',// add 新增  see 查看
        leftProp: ['基础信息', '任务信息', '汇报记录', '问题反馈', '附件信息',],
        rightProp: {
          height: document.documentElement.clientHeight - 90,//右边高度
        }
      },

      formData: {
        id: '',
        projectName: '',//项目名称
        projectManager: '',//项目负责人
        startTime: '',//开始时间
        estiAmount: '',//预计项目金额
        clientName: '',//客户名称
        projectContact: '',//项目联系人
        contactTel: '',//联系电话
        remarks: '',//项目说明
        status: '1',//状态
        //任务信息
        array1: [
          // {
          //   id:'',//
          //   responsible:'',//负责人
          //   taskName:'',//任务名称
          //   taskRemarks:'',//任务说明
          //   startTime:'',//开始时间
          //   endTime:'',//结束时间
          //   realEndTime:'',//实际结束时间
          //   performance:'',//绩效
          // },
        ],
        //汇报记录
        array2: [
          // {
          //   id:'',//
          //   reported:'',//汇报人
          //   reportName:'',//汇报名称
          //   reportContent:'',//汇报内容
          //   reportTime:'',//汇报时间
          // }
        ],
        //问题反馈
        array3: [
          // {
          //   id:'',//
          //   feedbacker:'',//问题反馈人
          //   feedbackName:'',//问题反馈名称
          //   feedbackContent:'',//问题反馈内容
          //   feedbackTime:'',//问题反馈时间
          // }
        ],
        //附件信息
        array4: [
          // {
          //   id:'',//
          //   type:'3',//类型:1汇报/2反馈/3商机信息附件
          //   name:'',//附件名称
          //   fileName:'',//附件URL
          // }
        ],
      },
      //选项
      //附件上传
      array4Option: {
        disabled: false,//是否禁用
        class: '',//上传文件组件需要修改样式的时候用
        name: '点击上传',//显示的按钮名称是否叫点击上传
        urlType: 'fileName',//后台返回的字段文件字段值
        size: 2,//最大上传几MB的文件
        limit: 5,//最多上传多少个文件 0 是不限制
        multiple: true,//是否支持多选文件上传
        accept: '.xls,.xlsx,.doc,.docx',//可上传文件格式,用,号隔开
        delMethod:'delAttachmentDownload',//附件删除方法
      },
      projectManagerOption: [],//项目负责人和人员信息 选项
      statusOption: [
        {label: '商机', value: '1'},
        {label: '已立项', value: '2'},
        {label: '已失效', value: '3'},
      ],//状态 选项

      //分页配置
      paginationProp: {
        currentPage: 1,//当前第几页
        pageSize: 10,//每页几条
        total: 0,//总数
      },
      //tabs和table dialog 字段选择显示
      toConfigureFieldDialog: {
        isDialog: false,
        title: '筛选项配置',
        loading: false,
        status: 'tabsProp',
        search: '',//搜索的值
        selectNum: 0,//选择的数量
        frozenFrontNum: 0,//冻结前几条
        frozenAfterNum: 0,//冻结后几条
        draggableProp: [],//拖拽数据
        tabsProp: [
          {
            name: '基础信息',//标题
            show: true,//搜索是否显示
            option: [{checkbox: true, label: '项目名称', show: true, order: 0},
            ]
          },

        ],
        tableProp: [
          {
            name: '基础信息',//标题
            show: true,//搜索是否显示
            option: [{checkbox: true, label: '项目名称', show: true, fixed: false},
              {checkbox: true, label: '项目负责人', show: true, fixed: false},
              {checkbox: true, label: '开始时间', show: true, fixed: false},
              {checkbox: true, label: '预计项目金额', show: true, fixed: false},
              {checkbox: true, label: '客户名称', show: true, fixed: false},
              {checkbox: true, label: '项目联系人', show: true, fixed: false},
              {checkbox: true, label: '联系电话', show: true, fixed: false},
              {checkbox: true, label: '项目说明', show: true, fixed: false},
              {checkbox: true, label: '状态', show: true, fixed: false},
            ]
          },

        ]
      },
    }
  },
  mounted() {
    //高级搜索差几个li
    this.tabsOrTableInit();

    //人员
    this.$navigation38AllStaffInfo().then((result) => {
      this.projectManagerOption = result.map(item => ({
        label: item.name,
        value: item.id
      }));
    })

    this.initData();//数据初始化
    this.calculationHeight();//table计算高度
    //监听浏览器变化
    window.onresize = () => {
      return (() => {
        this.calculationHeight();//table计算高度
      })();
    };
  },
  watch: {
    //主要作用监听赋值给table高度
    'tabsProp.SearchDropDown'() {
      this.calculationHeight();//table计算高度
    },
  },
  methods: {

    //添加任务信息 添加
    addTaskInformation() {
      let jsonData = {
        id: '',//
        responsible: '',//负责人
        taskName: '',//任务名称
        taskRemarks: '',//任务说明
        startTime: '',//开始时间
        endTime: '',//结束时间
        realEndTime: '',//实际结束时间
        performance: '10',//绩效
      }
      this.formData.array1.push(jsonData)
    },

    //添加任务信息 删除
    delTaskInformation(key, row) {
      if (row.id) {
        this.$confirm('此操作将永久删除, 是否继续?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // let data = {
          //   id: this.formData.dispatchExperience[key].id2
          // }
          // this.$navigation4Del(data).then(() => {
          //   this.$message.success('删除成功');
          //   this.formData.dispatchExperience.splice(key, 1);
          // })
          this.formData.array1.splice(key, 1)
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      } else {
        this.formData.array1.splice(key, 1)
      }
    },

    //添加任务信息 完成
    completeTaskInformation(key, row) {
      console.log(key, row)
      let realEndTime = new Date().getTime()
      let data = {
        id: row.id,//
        realEndTime: this.Utils.timeDate(realEndTime, 4),//实际结束时间
      }
      this.$navigation19AddEditBusinessTask(data).then(() => {
        row.realEndTime = realEndTime
        this.$message.success('完成成功');
      })
    },

    //添加汇报记录 添加
    addReportRecord() {
      let jsonData = {
        id: '',//
        reported: '',//汇报人
        reportName: '',//汇报名称
        reportContent: '',//汇报内容
        reportTime: '',//汇报时间
      }
      this.formData.array2.push(jsonData)
    },

    //添加汇报记录 删除
    delReportRecord(key, row) {
      if (row.id) {
        this.$confirm('此操作将永久删除, 是否继续?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.id
          }
          this.$navigation19DelBusinessReport(data).then(() => {
            this.$message.success('删除成功');
            this.formData.array2.splice(key, 1)
          })
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      } else {
        this.formData.array2.splice(key, 1)
      }
    },

    //添加问题反馈 添加
    addProblemFeedback() {
      let jsonData = {
        id: '',//
        feedbacker: '',//问题反馈人
        feedbackName: '',//问题反馈名称
        feedbackContent: '',//问题反馈内容
        feedbackTime: '',//问题反馈时间
      }
      this.formData.array3.push(jsonData)
    },

    //添加问题反馈 删除
    delProblemFeedback(key, row) {
      if (row.id) {
        this.$confirm('此操作将永久删除, 是否继续?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.id
          }
          this.$navigation19DelBusinessFeedback(data).then(() => {
            this.$message.success('删除成功');
            this.formData.array3.splice(key, 1)
          })

        }).catch(() => {
          this.$message.info('已取消删除');
        });
      } else {
        this.formData.array3.splice(key, 1)
      }
    },

    //附件下载
    attachmentDownload(key, row) {
      console.log(key, row)
      this.Utils.uploadFileDownload(this.$store.state.env + '/' + row.fileName, row.name)
    },

    //附件 删除
    async delAttachmentDownload(row) {
      if (row.id) {
        let data = {
          id: row.id
        }
        await this.$navigation19DelBusinessAppendix(data).then(() => {
        })
      }
    },


    //初始化
    initData() {
      this.tableProp.loading = true;
      //下拉接口
      let variableArray = [];//变量数组
      if (!this.apiProp.selectApiBoolean) {
        // const form1=new Promise((resolve)=>{
        // this.$().then((result) => {
        //   console.log(result);
        // this.empUnitIdOption = result.map(item => ({
        //  label: item.unitName,
        //  value: item.id
        //  }));
        // resolve()
        // })
        // })
        // variableArray.push(form1)
        this.apiProp.selectApiBoolean = true;
      }
      Promise.all(variableArray).then(() => {
        if (this.apiProp.tableInit) {
          let params = {
            page: this.paginationProp.currentPage,
            row: this.paginationProp.pageSize,

            projectName: encodeURI(this.tabsSearchData.projectName),//项目名称

          }
          params[`${this.tabsProp.statusField}`] = this.tabsProp.active == 0 ? '' : this.tabsProp.active
          this[`$${this.apiProp.tableInit}`](params).then((result) => {
            if (result.data) {
              this.tableData = result.data.map(item => ({
                id: item.id,

                projectName: item.projectName,//项目名称

                projectManager: item.projectManager ? item.projectManager : '',//项目负责人

                startTime: item.startTime,//开始时间

                estiAmount: item.estiAmount,//预计项目金额

                clientName: item.clientName,//客户名称

                projectContact: item.projectContact,//项目联系人

                contactTel: item.contactTel,//联系电话

                remarks: item.remarks,//项目说明

                status: item.status ? item.status : '',//状态

                array1: [],//任务反馈

                array2: [],//汇报记录

                array3: [],//问题反馈

                array4: [],//附件信息

              }));
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            } else {
              this.tableData = [];
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            }
          }, () => {
            this.tableProp.loading = false;
          })
        } else {
          this.tableProp.loading = false;
        }
      })
    },

    // 1商机/2已立项/3已失效
    //table 立项 点击
    tableBut2(row) {
      console.log(row)
      // let data={
      //   id:row.id,
      //   status:'1'
      // }
      // this.$navigation19AddEdit(data).then(() => {
      //   this.$message.success('立项成功');
      //   this.initData();
      // })
    },

    //table 失效 点击
    tableBut3(row) {
      let data={
        id:row.id,
        status:'3'
      }
      this.$navigation19AddEdit(data).then(() => {
        this.$message.success('失效成功');
        this.initData();
      })
    },

    //table 还原 点击
    tableBut4(row) {
      let data={
        id:row.id,
        status:'1'
      }
      this.$navigation19AddEdit(data).then(() => {
        this.$message.success('还原成功');
        this.initData();
      })
    },

    //table 点击查看
    tableSeeClick(row, key) {
      this.formData = this.$options.data().formData;
      this.drawerProp.isDrawer = true;
      this.drawerProp.loading = true;
      this.drawerProp.title = '详细信息';
      this.drawerProp.status = 'see';
      if (key !== undefined) {
        this.drawerActiveClick(key)
      }
      let params = {
        id: row.id
      }
      this[`$${this.apiProp.tableQuery}`](params).then((result) => {
        this.formData.id = result.data.id;
        this.formData.projectName = result.data.projectName;//项目名称
        this.formData.projectManager = Number(result.data.projectManager);//项目负责人
        this.formData.startTime = result.data.startTime ? this.Utils.stampData13(result.data.startTime) : '';//开始时间
        this.formData.estiAmount = result.data.estiAmount;//预计项目金额
        this.formData.clientName = result.data.clientName;//客户名称
        this.formData.projectContact = result.data.projectContact;//项目联系人
        this.formData.contactTel = result.data.contactTel;//联系电话
        this.formData.remarks = result.data.remarks;//项目说明
        this.formData.status = result.data.status;//状态

        //任务信息
        this.$navigation19AllBusinessTask({businessId: result.data.id}).then((result) => {
          this.formData.array1 = result.map(item => ({
            id: item.id,//
            responsible: Number(item.responsible),//负责人
            taskName: item.taskName,//任务名称
            taskRemarks: item.taskRemarks,//任务说明
            startTime: item.startTime ? this.Utils.stampData13(item.startTime) : '',//开始时间
            endTime: item.endTime ? this.Utils.stampData13(item.endTime) : '',//结束时间
            realEndTime: item.realEndTime ? this.Utils.stampData13(item.realEndTime) : '',//实际结束时间
            performance: item.performance,//绩效
          }));
        })

        //汇报记录
        this.$navigation19AllBusinessReport({businessId: result.data.id}).then((result) => {
          this.formData.array2 = result.map(item => ({
            id: item.id,//
            reported: Number(item.reported),//汇报人
            reportName: item.reportName,//汇报名称
            reportContent: item.reportContent,//汇报内容
            reportTime: item.reportTime ? this.Utils.stampData13(item.reportTime) : '',//汇报时间
          }));
        })

        //问题反馈
        this.$navigation19AllBusinessFeedback({businessId: result.data.id}).then((result) => {
          this.formData.array3 = result.map(item => ({
            id: item.id,//
            feedbacker: Number(item.feedbacker),//问题反馈人
            feedbackName: item.feedbackName,//问题反馈名称
            feedbackContent: item.feedbackContent,//问题反馈内容
            feedbackTime: item.feedbackTime ? this.Utils.stampData13(item.feedbackTime) : '',//问题反馈时间
          }));
        })

        //附件信息
        this.$navigation19AllBusinessAppendix({objectId: result.data.id, type: '3'}).then((result) => {
          this.formData.array4 = result.map(item => ({
            id: item.id,//
            name: item.appendixName,//附件名称
            fileName: item.appendixUrl,//附件URL
          }));
        })
        // appendixName: this.formData.array4[i].name,//附件名称
        //     appendixUrl: this.formData.array4[i].fileName,//附件URL

        // this.formData.array1 = result.data.array1;//任务反馈
        // this.formData.array2 = result.data.array2;//汇报记录
        // this.formData.array3 = result.data.array3;//问题反馈
        // this.formData.array4 = result.data.array4;//附件信息
        this.drawerProp.loading = false;
      })
    },

    //抽屉 点击保存 和取消
    drawerSubmitForm(status) {
      if (status === 'see') {
        this.drawerProp.status = 'see';
        this.tableSeeClick({id: this.formData.id}, this.drawerProp.active);
        return false
      }
      let variableArray = [];//变量数组
      for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
        variableArray.push('form' + i);
        variableArray[i] = new Promise((resolve) => {
          this.$refs['drawerFrom' + i].validate((valid) => {
            if (valid)
              resolve()
          })
        })
      }
      Promise.all(variableArray).then(() => {
        this.drawerProp.loading = true;
        let data = {
          id: this.formData.id,
          projectName: this.formData.projectName,//项目名称
          projectManager: this.formData.projectManager,//项目负责人
          startTime: this.formData.startTime ? this.Utils.timeDate(this.formData.startTime, 4) : '',//开始时间
          estiAmount: this.formData.estiAmount,//预计项目金额
          clientName: this.formData.clientName,//客户名称
          projectContact: this.formData.projectContact,//项目联系人
          contactTel: this.formData.contactTel,//联系电话
          remarks: this.formData.remarks,//项目说明
          status: this.formData.status,//状态
          array1: this.formData.array1,//任务反馈
          array2: this.formData.array2,//汇报记录
          array3: this.formData.array3,//问题反馈
          array4: this.formData.array4,//附件信息
        }
        this[`$${this.apiProp.tableAddEdit}`](data).then((res) => {
          let businessId = res.data ? res.data : this.formData.id;

          //任务信息
          for (let i = 0; i < this.formData.array1.length; i++) {
            let data = {
              id: this.formData.array1[i].id,//
              businessId: businessId,//商机信息表project_business的id
              responsible: this.formData.array1[i].responsible,//负责人
              taskName: this.formData.array1[i].taskName,//任务名称
              taskRemarks: this.formData.array1[i].taskRemarks,//任务说明
              startTime: this.formData.array1[i].startTime ? this.Utils.timeDate(this.formData.array1[i].startTime, 4) : '',//开始时间
              endTime: this.formData.array1[i].endTime ? this.Utils.timeDate(this.formData.array1[i].endTime, 4) : '',//结束时间
              performance: this.formData.array1[i].performance,//绩效
              status: '1'//状态：1-启用2-停用
            }
            this.$navigation19AddEditBusinessTask(data).then(() => {
            })
          }

          //汇报记录
          for (let i = 0; i < this.formData.array2.length; i++) {
            let data = {
              id: this.formData.array2[i].id,//
              businessId: businessId,//商机信息表business的id
              reported: this.formData.array2[i].reported,//汇报人
              reportName: this.formData.array2[i].reportName,//汇报名称
              reportContent: this.formData.array2[i].reportContent,//汇报内容
              reportTime: this.formData.array2[i].reportTime ? this.Utils.timeDate(this.formData.array2[i].reportTime, 4) : '',//汇报时间
              status: '1'//状态：1-启用2-停用
            }
            this.$navigation19AddEditBusinessReport(data).then(() => {
            })
          }

          //问题反馈
          for (let i = 0; i < this.formData.array3.length; i++) {
            let data = {
              id: this.formData.array3[i].id,//
              businessId: businessId,//商机信息表project_business的id
              feedbacker: this.formData.array3[i].feedbacker,//问题反馈人
              feedbackName: this.formData.array3[i].feedbackName,//问题反馈名称
              feedbackContent: this.formData.array3[i].feedbackContent,//问题反馈内容
              feedbackTime: this.formData.array3[i].feedbackTime ? this.Utils.timeDate(this.formData.array3[i].feedbackTime, 4) : '',//问题反馈时间
              status: '1'//状态：1-启用2-停用

            }
            this.$navigation19AddEditBusinessFeedback(data).then(() => {
            })
          }

          //附件信息
          for (let i = 0; i < this.formData.array4.length; i++) {
            let data = {
              id: this.formData.array4[i].id,//
              type: '3',//类型:1汇报/2反馈/3商机信息附件
              objectId: businessId,//表business_feedback或者business_report的id
              appendixName: this.formData.array4[i].name,//附件名称
              appendixUrl: this.formData.array4[i].fileName,//附件URL
            }
            this.$navigation19AddEditBusinessAppendix(data).then(() => {
            })
          }

          this.$message.success('保存成功');
          this.initData();
          if (status === 'add') {
            this.drawerProp.isDrawer = false;
            this.drawerProp.loading = false;
          } else {
            this.drawerProp.loading = false;
            this.drawerProp.status = 'see';
            this.tableSeeClick({id: this.formData.id})
          }
        }, () => {
          this.drawerProp.loading = false;
        })
      })
    },

    //title 新增商机信息 点击
    titleAddClick() {
      this.formData = this.$options.data().formData;
      this.drawerProp.isDrawer = true;
      this.drawerProp.loading = false;
      this.drawerProp.title = '新增商机信息';
      this.drawerProp.status = 'add';
      this.drawerActiveClick(0)
    },

    //tabs 点击设置图标 dialog拖拽
    tabsSetUpSearchClick() {
      console.log('tabs 点击设置图标')
    },
    //tabs 高级搜索 重置按钮
    tabsSearchReset() {
      this.tabsSearchData = this.$options.data().tabsSearchData;
    },
    //tabs 高级搜索 查询按钮点击
    tabsSearchDetermine() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },

    //tabs 切换点击
    tabsSwitchClick() {
      this.initData()
    },

    //table 分页 选择了每页几条
    pageSizeChange(val) {
      this.paginationProp.currentPage = 1;//当前第几页
      this.paginationProp.pageSize = val;//每页几条
      this.initData();
    },
    //table 分页 点击了跳转到第几页
    pageCurrentChange(val) {
      this.paginationProp.currentPage = val;//当前第几页
      this.initData();
    },

    //table 多选
    tableSelectionChange(val) {
      this.tableProp.tableSelectAll = [];
      for (let i = 0; i < val.length; i++) {
        this.tableProp.tableSelectAll.push(val[i].id)
      }
    },

    //table 点击删除
    tableDelClick(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        this[`$${this.apiProp.tableDel}`](data).then(() => {
          this.$message.success('删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    //抽屉 点击编辑
    drawerEdit(key) {
      this.drawerProp.title = '修改详细信息';
      this.drawerProp.status = 'edit';
      this.drawerActiveClick(key);
    },

    //抽屉左边 点击切换标题
    drawerActiveClick(key) {
      setTimeout(() => {
        let scrollHeight = 0;
        this.drawerLiArray = [];
        for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
          this.drawerLiArray.push(this.$refs[`drawerLi${i}`].scrollHeight);
          if (key > i) {
            scrollHeight += this.$refs[`drawerLi${i}`].scrollHeight
          }
        }
        this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
        this.drawerProp.active = key;
      }, 300)
    },
    //抽屉右边 监听鼠标滚动
    addWheelChange() {
      setTimeout(() => {
        let scrollTop = 0;
        for (let i = 0; i < this.drawerLiArray.length; i++) {
          scrollTop += this.drawerLiArray[i];
          if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
            this.drawerProp.active = i;
            return false;
          }
        }
      }, 300)
    },

    //table 批量删除
    tableTitleButBatchDel() {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.tableProp.tableSelectAll.length > 0 ? this.tableProp.tableSelectAll.toString() : ''
        }
        this[`$${this.apiProp.tableBatchDel}`](params).then(() => {
          this.$message.success('批量删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消批量删除');
      });
    },

    //table 计算高度
    calculationHeight() {
      setTimeout(() => {
        this.tableProp.tableHeight = document.documentElement.clientHeight - 220 - this.$refs.title.clientHeight - this.$refs.tabs.clientHeight - this.$refs.tableTopBut.clientHeight;
      }, 300)
    },
    //tabs or table dialog 初始化
    tabsOrTableInit() {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }

        this.toConfigureFieldDialog.isDialog = false;
        this.toConfigureFieldDialog.loading = false;
        let tabsFieldPropNum = 0; //有几个li
        for (let i = 0; i < this.toConfigureFieldDialog.tabsProp.length; i++) {

          for (let j = 0; j < this.toConfigureFieldDialog.tabsProp[i].option.length; j++) {
            if (this.toConfigureFieldDialog.tabsProp[i].option[j].checkbox) {
              tabsFieldPropNum++
            }
          }
        }
        if (this.$refs.commonTabsFrom) {
          let aLineNum = parseInt((this.$refs.commonTabsFrom.clientWidth / 462).toString());//一行几个
          this.tabsProp.liHtmlNum = aLineNum - tabsFieldPropNum % aLineNum - 1;//差几个li
        }
      })
    },
    //tabs or table dialog 点击搜索
    tabsOrTableSearch(search) {
      if (search) {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          let oneShow = false;//第一层是否显示
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            if (this.Utils.fuzzySearch(search, this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label)) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
              oneShow = true;
            } else {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = false;
            }
          }
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = oneShow;
        }
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = true;
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
          }
        }
      }
    },
    //tabs or table dialog 拖动点击删除
    tabsOrTableClose(item, key) {
      this.toConfigureFieldDialog.draggableProp.splice(key, 1);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          if (this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label === item.label) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].checkbox = false;
          }
        }
      }
    },
    //tabs or table dialog 清空以前的设置
    tabsOrTableDialogEmpty() {
      this.$confirm('此操作将永久清空搜索和表头设置, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          tableId: this.apiProp.tabsOrTableId,
          data: null
        }
        this.$commonApi(data).then(() => {
          this.$message.success('清空设置成功');
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        })
      }).catch(() => {
        this.$message.info('已取消清空设置');
      });
    },
    //tabs or table dialog 还原初始化
    tabsOrTableDialogReductionInit(status) {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.isDialog = true;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs or table dialog 点击 关闭 取消
    tabsOrTableCancel() {
      this.tabsOrTableInit();
    },
    //tabs or table dialog 点击确定
    tabsOrTableDetermine() {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.search = '';
      this.tabsOrTableSearch(this.toConfigureFieldDialog.search);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          for (let k = 0; k < this.toConfigureFieldDialog.draggableProp.length; k++) {
            if (this.toConfigureFieldDialog.draggableProp[k].label === this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].order = k;
            }
          }
        }
      }
      let data = {
        tableId: this.apiProp.tabsOrTableId,
        data: JSON.stringify(this.toConfigureFieldDialog)
      }
      this.$commonApi(data).then(() => {
        this.$message.success('保存成功');
        this.tabsOrTableInit();
        this.tabsSearchData = this.$options.data().tabsSearchData;
        this.initData();
      })
    },
    //tabs or table dialog 点击选择
    tabsOrTableChecked(item) {
      if (item.checkbox) {
        this.toConfigureFieldDialog.draggableProp.push(item)
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog.draggableProp.length; i++) {
          if (this.toConfigureFieldDialog.draggableProp[i].label === item.label) {
            this.toConfigureFieldDialog.draggableProp.splice(i, 1);
          }
        }
      }
      this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
    },
    //tabs table 设置图标和按钮 dialog拖拽
    tabsOrTableSetClick(status, title) {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.isDialog = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data)
        }
        this.toConfigureFieldDialog.title = title;
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        //排序
        this.toConfigureFieldDialog.draggableProp.sort(function (p1, p2) {
          return p1.order - p2.order
        })
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.loading = false;
      })
    },
  }
};
</script>
<style lang="scss" scoped></style>
